<template>
  <span :class="['wx_text', isMe ? 'isMe' : 'isCus']" v-html="html"></span>
</template>

<script>
import { emoji, ruleStr, emojiReplace } from "@/assets/emoticon.js";
export default {
  props: {
    isMe: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    obj: {
      content: String,
    },
  },
  computed: {
    html: function () {
      let res;
      try {
        res = this.obj.content
          .replace(/\</g, "&lt;")
          .replace(/\>/g, "&gt;")
          .replace(/\\n/g, "<br>");
      } catch (err) {
        res = "&nbsp;";
      }

      return emojiReplace(res);
    },
  },
  data() {
    return {
      msgtype: "text",
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.wx_text {
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 16px;
  line-height: 22px;
  margin: 0 12px;
  padding: 6px 12px;
  color: #111;
  white-space: pre-wrap;
  &.isMe {
    background-color: #e6f7ff;
    border-radius: 16px 0 16px 16px;
  }
  &.isCus {
    background-color: #eee;
    border-radius: 0px 16px 16px 16px;
  }
}
</style>